<template>
  <div class="content-box">
    <div class="tab-box">
      <button :class="showFOllow == true ?'tab-btn1 mr-32':' mr-32 tab-btn'" @click="MYshowFOllow">
        <i class="iconfont icon-liuyan mr-8"></i>我的留言
      </button>
      <button :class="showFOllow == false ?'tab-btn1 mr-32':' mr-32 tab-btn'" @click="MYHideFOllow">
        <i class="iconfont icon-hudongguanli mr-8"></i>他人的留言
      </button>
    </div>
    <div class="MyMessage" v-if="showFOllow">
      <h2>我的留言</h2>
      <div class="card-box">
        <!-- 我的留言产品需求Form -->
        <a-form layout="inline" class="clearfix" v-if="changeTar == 1" :form="form" @submit="handleSubmit">
          <a-form-item label="关键字：">
            <a-input placeholder="请输入需求名称" v-decorator="['keyword', { initialValue: '' }]" />
          </a-form-item>
          <a-form-item label="产品类别：">
            <a-select @change="productTypeOneChange" style="width: 230px;margin-right:10px" v-decorator="['reProducts', { initialValue: '' }]" placeholder="请选择">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option v-for="(item, index) in reProducts" :value="item.id" :key="index">{{ item.categoryName }}</a-select-option>
            </a-select>
            <a-select @change="productTypeOneChange1" style="width: 230px" v-decorator="['productSecondCategory', { initialValue: '' }]" placeholder="请选择">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option v-for="(item, index) in reProductsTwo" :value="item.categoryNo" :key="index">{{ item.categoryName }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="价格区间：">
            <a-input style="width: 120px; margin-right: 8px" v-decorator="['priceFrom', { initialValue: '' }]" />
            至
            <a-form-item>
              <a-input style="width: 120px; margin-left: 8px" v-decorator="['priceTo', { initialValue: '' }]" />
            </a-form-item>
          </a-form-item>
          <a-form-item label="截止时间">
            <a-range-picker :placeholder="['开始日期', '结束日期']" v-decorator="['Data']">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-form-item>
          <br />
          <div class="flex mt-5" style="justify-content: flex-end">
            <a-button style="color: #909399" class="mr-10" @click="clear">重置</a-button>
            <a-button type="primary" html-type="submit">搜索</a-button>
          </div>
        </a-form>
        <!-- 我的留言产品供应Form -->
        <a-form layout="inline" class="clearfix" v-if="changeTar == 2" :form="form" @submit="handleSubmit">
          <a-form-item label="关键字：">
            <a-input placeholder="请输入产品名称" v-decorator="['keyword']" />
          </a-form-item>
          <a-form-item label="产品类别：">
            <a-select @change="productProOneChange" style="width: 230px;margin-right:10px" v-decorator="['productProvideOne', { initialValue: '' }]" placeholder="请选择">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option v-for="(item, index) in reProducts" :value="item.id" :key="index">{{ item.categoryName }}</a-select-option>
            </a-select>
            <a-select @change="productProOneChange1" style="width: 230px" v-decorator="['productProSecond', { initialValue: '' }]" placeholder="请选择">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option v-for="(item, index) in productProvideTwo" :value="item.categoryNo" :key="index">{{ item.categoryName }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="价格区间：">
            <a-input style="width: 120px; margin-right: 8px" v-decorator="['priceFrom']" />
            至
            <a-form-item>
              <a-input style="width: 120px; margin-left: 8px" v-decorator="['priceTo']" />
            </a-form-item>
          </a-form-item>
          <a-form-item label="供应上限：">
            <a-checkbox :checked="checkNick" @change="checkChange" v-decorator="['productIslimited']">
              不限
            </a-checkbox>
          </a-form-item>

          <a-button class="f-right mt-5" type="primary" html-type="submit">搜索</a-button>
          <a-button class="f-right mr-10 mt-5" style="color: #909399" @click="clear">重置</a-button>
        </a-form>
        <a-form-model layout="inline" class="clearfix" v-if="changeTar == 3" :form="form" @submit="handleSubmit">
          <a-form-model-item label="关键字：">
            <a-input placeholder="请输入解决方案名称" v-model="MyMessageSoult.keyword" />
          </a-form-model-item>

          <a-form-model-item label="解决方案状态：">
            <a-select style="width: 230px;margin-right:10px" v-model="MyMessageSoult.productStatus" placeholder="请选择">
              <a-select-option :value="0">请选择</a-select-option>
              <a-select-option :value="1">已上架</a-select-option>
              <a-select-option :value="2">未上架</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-button class="f-right mt-5" type="primary" @click="SearchMySoult">搜索</a-button>
          <a-button class="f-right mr-10 mt-5" style="color: #909399" @click="clearMyMessageSoult">重置</a-button>
        </a-form-model>
      </div>
      <div>
        <a-tabs :activeKey="changeTar" @change="callback">
          <a-tab-pane :key="1" tab="产品需求">
            <div class="action">
              <!-- 我的留言产品需求table -->
              <a-table :scroll="{ x: 1500}" :columns="MyLiveMessageHead" :data-source="MyLiveMessageTableList" :pagination="MyLiveMessagePagination" :rowKey="(record) => record.id">
                <template slot="handle" slot-scope="text, recode">
                  <a @click="showInformation(recode)">详情</a>
                  <a-divider type="vertical" />
                  <a @click="operation(recode)">编辑</a>
                </template>
                <a slot="name" slot-scope="text">{{ text }}</a>
                <span slot="action" slot-scope="text, record">
                  <a @click="seeMatirial(record)" style="margin-right: 32px">查看详情</a>
                  <a @click="seeMessage(record, false)">查看留言</a>
                </span>
              </a-table>
            </div>
          </a-tab-pane>
          <a-tab-pane :key="2" tab="产品供应">
            <div class="action">
              <!-- 我的留言产品供应table -->
              <a-table :scroll="{ x: 1500}" :columns="MyMessageProvideHead" :data-source="MyMessageProvideList" :pagination="ProvideListPagination" :rowKey="(record) => record.id">
                <template slot="handle" slot-scope="text, recode">
                  <a @click="showInformation(recode)">详情</a>
                  <a-divider type="vertical" />
                  <a @click="operation(recode)">编辑</a>
                </template>
                <a slot="name" slot-scope="text">{{ text }}</a>
                <span slot="action" slot-scope="text, record">
                  <a @click="seeDetail(record)" style="margin-right: 32px">查看详情</a>
                  <a @click="seeMessage(record, true)">查看留言</a>
                </span>
              </a-table>
            </div>
          </a-tab-pane>
          <a-tab-pane :key="3" tab="解决方案">
            <!-- 解决方案 --我的留言 -->

            <div class="action">
              <!-- 我的留言产品供应table -->
              <a-table :scroll="{ x: 1500}" :columns="MyMessageSolultHead" :data-source="MyMessageSolultList" :pagination="SolultListPagination" :rowKey="(record) => record.id">
                <template slot="handle" slot-scope="text, recode">
                  <a @click="showInformation(recode)">详情</a>
                  <a-divider type="vertical" />
                  <a @click="operation(recode)">编辑</a>
                </template>
                <a slot="name" slot-scope="text">{{ text }}</a>
                <span slot="action" slot-scope="text, record">
                  <a @click="seeSolutDetail(record)" style="margin-right: 32px">查看详情</a>
                  <a @click="seeMessage(record, true,'解决方案')">查看留言</a>
                </span>
              </a-table>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>

    <div class="Interactive" v-else-if="!showFOllow">
      <h2>他人的留言</h2>
      <div class="card-box">
        <!-- 他人的留言产品需求搜索表单 -->
        <a-form layout="inline" class="clearfix" v-if="changeTarTwo == 1" :form="form" @submit="handleSubmit">
          <a-form-item label="关键字：">
            <a-input placeholder="请输入需求名称或需求编号" style="width: 250px" v-decorator="['keyword']" />
          </a-form-item>
          <a-form-item label="状态：">
            <a-select style="width: 120px" v-decorator="['reStatus1', { initialValue: '' }]" placehold="请选择">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option v-for="item in reStatus1" :value="item.value" :key="item.key">{{ item.label }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="留言时间">
            <a-range-picker :placeholder="['开始日期', '结束日期']" v-decorator="['data']">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-form-item>
          <a-button class="f-right mt-5" type="primary" html-type="submit">搜索</a-button>
          <a-button class="f-right mr-10 mt-5" style="color: #909399" @click="clear2">重置</a-button>
        </a-form>
        <!-- 他人的留言供应搜索表单 -->
        <a-form layout="inline" class="clearfix" v-if="changeTarTwo == 2" :form="form" @submit="handleSubmit">
          <a-form-item label="关键字：">
            <a-input placeholder="请输入产品名称或产品编号" style="width: 250px" v-decorator="['keyword']" />
          </a-form-item>
          <a-form-item label="状态：">
            <a-select style="width: 120px" v-decorator="['reStatus1', { initialValue: '' }]">
              <a-select-option value="">请选择</a-select-option>
              <a-select-option v-for="item in reStatus1" :value="item.value" :key="item.key">{{ item.label }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="留言时间">
            <a-range-picker :placeholder="['开始日期', '结束日期']" v-decorator="['data']">
              <a-icon slot="suffixIcon" type="calendar" />
            </a-range-picker>
          </a-form-item>
          <a-button class="f-right mt-5" type="primary" html-type="submit">搜索</a-button>
          <a-button class="f-right mr-10 mt-5" style="color: #909399" @click="clear2">重置</a-button>
        </a-form>

        <a-form-model layout="inline" class="clearfix" v-if="changeTarTwo == 3" :form="form" @submit="handleSubmit">
          <a-form-model-item label="关键字：">
            <a-input placeholder="请输入解决方案名称" v-model="TaRenSoult.keyword" />
          </a-form-model-item>

          <a-form-model-item label="解决方案状态：">
            <a-select style="width: 230px;margin-right:10px" v-model="TaRenSoult.productStatus" placeholder="请选择">
              <a-select-option :value="0">请选择</a-select-option>
              <a-select-option :value="1">已上架</a-select-option>
              <a-select-option :value="2">未上架</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-button class="f-right mt-5" type="primary" @click="TaRenSearch">搜索</a-button>
          <a-button class="f-right mr-10 mt-5" style="color: #909399" @click="TaRenclear">重置</a-button>
        </a-form-model>
      </div>
      <div>
        <a-tabs :activeKey="changeTarTwo" @change="callback2">
          <!-- 他人的留言产品需求 -->
          <a-tab-pane :key="1" tab="产品需求">
            <div style="margin-bottom: 16px">
              <a-button type="primary" class="mr-10" :disabled="!hasSelected" :loading="loading" @click="batchUpdate">设置为已读</a-button>
            </div>
            <!-- 他人的留言产品需求table -->
            <a-table :scroll="{ x: 1500}" :row-selection="{
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange,
              }" :columns="MaterialsDemandHead" :data-source="MaterialsDemandPageList" :pagination="MaterialsDemandPagination" :rowKey="(record) => record.id">
              <span slot="action" slot-scope="text, record">
                <a @click="seeResponse(record, false)" style="margin-right: 32px">查看留言</a>
                <a @click="deleteMessage(record, 1)">删除</a>
              </span>
            </a-table>
          </a-tab-pane>
          <!-- 他人的留言产品供应 -->
          <a-tab-pane :key="2" tab="产品供应">
            <div style="margin-bottom: 16px">
              <a-button type="primary" class="mr-10" :disabled="!hasSelectedTwo" :loading="loading" @click="batchUpdateTwo">设置为已读</a-button>
            </div>
            <!-- 他人的留言产品供应table -->
            <a-table :scroll="{ x: 1500}" :row-selection="{
                selectedRowKeys: selectedRowKeysTwo,
                onChange: onSelectChangeTwo,
              }" :columns="ProductInfoListHead" :data-source="ProductInfoList" :pagination="ProductInfoListPagination" :rowKey="(record) => record.id">
              <span slot="action" slot-scope="text, record">
                <a @click="seeResponse(record, true)" style="margin-right: 32px">查看留言</a>
                <a @click="deleteMessage(record, 2)">删除</a>
              </span>
            </a-table>
          </a-tab-pane>

          <a-tab-pane :key="3" tab="解决方案">
            <!-- 解决方案 --他人的留言 -->
            <div style="margin-bottom: 16px">
              <a-button type="primary" class="mr-10" :disabled="!hasSelectedThree" :loading="loading" @click="batchUpdateThree">设置为已读</a-button>
            </div>
            <div class="action">
              <!-- 我的留言产品供应table -->
              <a-table :row-selection="{
                selectedRowKeys: selectedRowKeysThree,
                onChange: onSelectChangeThree,
              }" :scroll="{ x: 1500}" :columns="MaterialsMessageSolultHead" :data-source="MaterialsMessageSolultList" :pagination="MaterialsSolultListPagination" :rowKey="(record) => record.id">
                <template slot="handle" slot-scope="text, recode">
                  <a @click="showInformation(recode)">详情</a>
                  <a-divider type="vertical" />
                  <a @click="operation(recode)">编辑</a>
                </template>
                <a slot="name" slot-scope="text">{{ text }}</a>
                <span slot="action" slot-scope="text, record">
                  <a class="mr-32" @click="seeResponse(record, true,'解决方案')">查看留言</a>
                  <a @click="deleteMessage(record, 3)" style="margin-right: 32px">删除</a>
                </span>
              </a-table>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
    <!-- 我的留言=>查看留言模态框 -->
    <a-modal v-model="messageVisible" title="留言内容" :width="800">
      <template v-if="!showMessageStatus && !showSoultMessageStatus">
        <ul class="messageCompany">
          <!-- <li>供应企业：{{MessageForm.supplyEntName}}</li>
            <li>企业地址：{{MessageForm.supplyAddress}}</li>
            <li>
              企业网址：<a :href="MessageForm.supplyUrl">{{MessageForm.supplyUrl}}</a>
            </li> -->
          <li>联系人：{{ MessageForm.supplyContact }}</li>
          <li>手机号码：{{ MessageForm.supplyPhone }}</li>
          <li>电子邮箱：{{ MessageForm.supplyEmail }}</li>
          <!-- <li>已发布产品：<a href=""> {{MessageForm.productName}}</a></li> -->
          <!-- ["a3623824-becb-4ab4-95ba-f7e8766bc5a4:全棉时代木棉枕芯成人儿童家用单双人枕头护颈椎枕", "5c10347d-7432-40bf-b143-2f049b041cb7:加拿大专享全棉时代初生婴儿抱被宝宝纯棉春夏薄款被子新生儿用品"] -->
          <li>
            已发布产品：<br />
            <a href="#" @click="seeProduct(item.id)" v-for="(item, index) in productList" :key="index">
              {{ item.name }}<br />
            </a>
          </li>
        </ul>
        <div class="messagetxt">附言：{{ MessageForm.postscript }}</div>
      </template>
      <template v-if="showMessageStatus && !showSoultMessageStatus">
        <ul class="messageCompany">
          <!-- <li>采购企业：{{MessageForm.demandEntName}}</li>
            <li>企业地址：{{MessageForm.demandAddress}}</li>
            <li>
              企业网址：<a :href="MessageForm.demandUrl">{{MessageForm.demandUrl}}</a>
            </li> -->
          <li>联系人：{{ MessageForm.demandContact }}</li>
          <li>手机号码：{{ MessageForm.demandPhone }}</li>
          <li>电子邮箱：{{ MessageForm.demandEmail }}</li>
        </ul>
        <div class="messagetxt">附言：{{ MessageForm.postscript }}</div>
      </template>

      <template v-if="showSoultMessageStatus">
        <ul class="messageCompany">
          <!-- <li>采购企业：{{MessageForm.demandEntName}}</li>
            <li>企业地址：{{MessageForm.demandAddress}}</li>
            <li>
              企业网址：<a :href="MessageForm.demandUrl">{{MessageForm.demandUrl}}</a>
            </li> -->
          <li>联系人：{{ MessageForm.contact }}</li>
          <li>手机号码：{{ MessageForm.phone }}</li>
          <li>电子邮箱：{{ MessageForm.email }}</li>
        </ul>
        <div class="messagetxt">附言：{{ MessageForm.postscript }}</div>
      </template>
      <template slot="footer">
        <a-button key="submit" type="primary" @click="clearMessage">
          关闭
        </a-button>
      </template>
    </a-modal>

    <!-- 他人的留言模态框 -->
    <a-modal v-model="visible" title="留言内容" :width="800">
      <template v-if="!showStatus && !showSoultMessageStatus">
        <ul class="messageCompany">
          <li>企业名称：{{ detailForm.supplyEntName }}</li>
          <li>企业地址：{{ detailForm.supplyAddress }}</li>
          <li>
            企业网址：<a target="_blank" :href="detailForm.supplyUrl">{{
              detailForm.supplyUrl
            }}</a>
          </li>
          <li>联系人：{{ detailForm.supplyContact }}</li>
          <li>手机号码：{{ detailForm.supplyPhone }}</li>
          <li>电子邮箱：{{ detailForm.supplyEmail }}</li>
          <li>
            已发布产品：<a href="">
              <br /><a href="#" @click="seeProduct(item.id)" v-for="(item, index) in productList" :key="index">{{ item.name }}<br /></a></a>
          </li>
        </ul>
        <div class="messagetxt">附言：{{ detailForm.postscript }}</div>
      </template>
      <template v-if="showStatus && !showSoultMessageStatus">
        <ul class="messageCompany">
          <li>企业名称：{{ detailForm.demandEntName }}</li>
          <li>企业地址：{{ detailForm.demandAddress }}</li>
          <li>
            企业网址：<a target="_blank" :href="detailForm.demandUrl">{{
              detailForm.demandUrl
            }}</a>
          </li>
          <li>联系人：{{ detailForm.demandContact }}</li>
          <li>手机号码：{{ detailForm.demandPhone }}</li>
          <li>电子邮箱：{{ detailForm.demandEmail }}</li>
        </ul>
        <div class="messagetxt">附言：{{ detailForm.postscript }}</div>
      </template>

      <template v-if="showSoultMessageStatus">
        <ul class="messageCompany">
          <li>企业名称：{{ detailForm.entName }}</li>
          <li>企业地址：{{ detailForm.entAddress }}</li>
          <li>
            企业网址：<a target="_blank" :href="detailForm.demandUrl">{{
              detailForm.demandUrl
            }}</a>
          </li>
          <li>联系人：{{ detailForm.contact }}</li>
          <li>手机号码：{{ detailForm.phone }}</li>
          <li>电子邮箱：{{ detailForm.email }}</li>
        </ul>
        <div class="messagetxt">附言：{{ detailForm.postscript }}</div>
      </template>
      <template slot="footer">
        <a-button key="submit" type="primary" @click="close"> 关闭 </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import {
  productCategory,
  getMyMaterialsDemandPageList,
  getMyProductInfoPageList,
  getMaterialsDemandPageList,
  getProductInfoPageList,
  updateMessage,
  deleteMessage,
  getMyUserMessageSolutionInfoList,
} from "@/apis/user/MyMessage";
import { getProductOneCategory } from "@/apis/productProvide";
import { GetproductDetail } from "@/apis/user/ProductInfo";

import { Icon } from "ant-design-vue";

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: "//at.alicdn.com/t/font_2056587_edr833x75tr.js",
});
// 我的留言产品需求
const MyLiveMessageHead = [
  {
    title: "序号",
    dataIndex: "idNum",
    width: 60,
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
  },
  {
    title: "需求名称",
    dataIndex: "demandProductName",
    // width: 200,
    //  ellipsis: true,
    width: 200,
    ellipsis: true,
  },
  {
    title: "产品类别",
    dataIndex: "categoryName",
    align: "center",
    // width:200,
    // ellipsis: true,
    width: 200,
    ellipsis: true,
  },
  {
    title: "预算价格(元)",
    // dataIndex: "price",
    align: "center",
    customRender: function (text, recode) {
      return recode.price + "元";
    },
    // width: 100,
    // ellipsis: true,
  },
  {
    title: "需求企业",
    dataIndex: "demandEntName",
    //  width:200,
    //  ellipsis: true,
    width: 200,
    ellipsis: true,
  },
  // {
  //   title: "需求状态",
  //   dataIndex: "demandStatus",
  //   width:100,
  //   customRender: function (text) {
  //     if (text == 1) {
  //       return "已解决";
  //     } else if (text == 2) {
  //       return "未解决";
  //     }
  //   },
  // },
  {
    title: "截止时间",
    dataIndex: "expirationDate",
    align: "center",
    // width: 200,
    //  ellipsis: true,
    ellipsis: true,
  },
  {
    title: "留言时间",
    dataIndex: "createTime",
    align: "center",
    // width:200,
    // ellipsis: true,
  },
  {
    title: "操作",
    dataIndex: "action",
    fixed: "right",
    width: 200,
    scopedSlots: { customRender: "action" },
  },
];
// 我的留言产品供应
const MyMessageProvideHead = [
  {
    title: "序号",
    dataIndex: "idNum",
    width: 60,
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
  },
  {
    title: "产品名称",
    dataIndex: "productName",
    // width: 200,
    // ellipsis: true,
  },
  {
    title: "产品类别",
    dataIndex: "categoryName",
    // ellipsis: true,
    // width: 200,
  },
  {
    title: "上市日期",
    dataIndex: "publicDate",
    align: "center",
    // width: 120,
    // ellipsis: true,
  },
  {
    title: "价格(元)",
    // dataIndex: "price",
    align: "center",
    customRender: function (text, recode) {
      return recode.price + "元";
    },
    // width: 80,
    // ellipsis: true,
  },
  {
    title: "供应上限",
    dataIndex: "productIslimited",
    align: "center",
    // width: 100,
    customRender: function (text, record) {
      if (text == 1) {
        return "不限";
      } else if (text == 0 || text == null) {
        return record.productCeiling;
      }
    },
  },
  {
    title: "供应企业",
    dataIndex: "supplyEntName",
    width: 200,
    // ellipsis: true,
  },
  // {
  //   title: "产品状态",
  //   dataIndex: "productStatus",
  //   width: 90,
  //   customRender: function (text) {
  //     if (text == 1) {
  //       return "已上架";
  //     } else if (text == 2) {
  //       return "未上架";
  //     }
  //   },
  // },
  {
    title: "留言时间",
    dataIndex: "createTime",
    align: "center",
    // width: 200,
    // ellipsis: true,
  },
  {
    title: "操作",
    dataIndex: "action",
    width: 200,
    fixed: "right",
    scopedSlots: { customRender: "action" },
  },
];

// 我的留言解决方案
const MyMessageSolultHead = [
  {
    title: "序号",
    dataIndex: "idNum",
    width: 60,
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
  },
  {
    title: "解决方案名称",
    dataIndex: "solutionName",
    // width: 200,
    // ellipsis: true,
  },
  {
    title: "解决方案编号",
    dataIndex: "solutionNo",
    // ellipsis: true,
    // width: 200,
  },

  {
    title: "供应企业",
    dataIndex: "entName",
    // ellipsis: true,
    // width: 200,
  },
  {
    title: "留言时间",
    dataIndex: "createTime",
    // ellipsis: true,
    // width: 200,
  },

  {
    title: "解决方案状态",
    dataIndex: "solutionStatus",
    width: 190,
    customRender: function (text) {
      if (text == 1) {
        return "已上架";
      } else if (text == 2) {
        return "未上架";
      }
    },
  },

  {
    title: "操作",
    dataIndex: "action",
    width: 200,
    fixed: "right",
    scopedSlots: { customRender: "action" },
  },
];
// 他人的留言需求响应
const MaterialsDemandHead = [
  {
    title: "序号",
    dataIndex: "idNum",
    width: 80,
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
  },
  {
    title: "需求名称",
    dataIndex: "demandProductName",
    // width: 250,
    // ellipsis: true,
  },
  {
    title: "需求编号",
    dataIndex: "demandNo",
    align: "center",
    // width: 150,
    // ellipsis: true,
  },
  {
    title: "供应企业",
    dataIndex: "supplyEntName",
    width: 200,
    // ellipsis: true,
  },
  {
    title: "留言状态",
    dataIndex: "readStatus",
    align: "center",
    customRender: function (text) {
      if (text == 0) {
        return "未读";
      } else if (text == 1) {
        return "已读";
      }
    },
  },
  {
    title: "留言时间",
    dataIndex: "createTime",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "action",
    fixed: "right",
    scopedSlots: { customRender: "action" },
  },
];
// 他人的留言供应采购
const ProductInfoListHead = [
  {
    title: "序号",
    dataIndex: "idNum",
    width: 80,
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
  },
  {
    title: "产品名称",
    dataIndex: "productName",
    ellipsis: true,
  },
  {
    title: "产品编号",
    dataIndex: "productNo",
    // align:"center"
  },
  {
    title: "采购企业",
    dataIndex: "demandEntName",
    width: 250,
  },
  {
    title: "留言状态",
    dataIndex: "readStatus",
    align: "center",
    customRender: function (text) {
      if (text == 0) {
        return "未读";
      } else if (text == 1) {
        return "已读";
      }
    },
  },
  {
    title: "留言时间",
    dataIndex: "createTime",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
    fixed: "right",
  },
];

// 我的留言解决方案
const MaterialsMessageSolultHead = [
  {
    title: "序号",
    dataIndex: "idNum",
    width: 60,
    customRender: (text, record, index) => `${index + 1}`, // 显示每一行的序
  },
  {
    title: "解决方案名称",
    dataIndex: "solutionName",
    // width: 200,
    // ellipsis: true,
  },
  {
    title: "解决方案编号",
    dataIndex: "solutionNo",
    // width: 200,
    // ellipsis: true,
  },
  {
    title: "咨询企业",
    dataIndex: "entName",
    // ellipsis: true,
    // width: 200,
  },
  {
    title: "留言状态",
    dataIndex: "readStatus",
    align: "center",
    customRender: function (text) {
      if (text == 0) {
        return "未读";
      } else if (text == 1) {
        return "已读";
      }
    },
  },
  {
    title: "留言时间",
    dataIndex: "createTime",
    // ellipsis: true,
    // width: 200,
  },
  {
    title: "解决方案状态",
    dataIndex: "solutionStatus",
    width: 190,
    customRender: function (text) {
      if (text == 1) {
        return "已上架";
      } else if (text == 2) {
        return "未上架";
      }
    },
  },

  {
    title: "操作",
    dataIndex: "action",
    width: 200,
    fixed: "right",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  data() {
    return {
      MyMessageSoult: {
        keyword: "",
        productStatus: 0,
      },
      TaRenSoult: {
        keyword: "",
        productStatus: 0,
      },
      showFOllow: true,
      productOneCategory: "", //产品需求=>产品类别参数一
      productTwoCategory: "", //产品需求=>产品类别参数一
      reProducts: [],
      reProductsTwo: [], //产品需求=>产品类别二级菜单
      showSoultMessageStatus: false, //我的留言弹窗
      productProOne: "", //产品供应=>产品类别参数一
      productProTwo: "", //产品供应=>产品类别参数一
      productProvideTwo: [], //产品供应=>产品类别二级菜单

      productIslimited: 0, //供应上线
      checkNick: false,
      limit: false,
      unReadIds: "", //未读的Id
      unReadIdsTwo: "", //未读的IdTwo
      showMessageStatus: false,
      messageVisible: false,
      MessageForm: {}, //我的留言查看留言
      visible: false,
      detailForm: {}, //他人的留言查看详情
      showStatus: false, //模态框采购企业是否显示
      MyLiveMessageHead,
      MaterialsMessageSolultHead,
      MaterialsMessageSolultList: [],
      MyLiveMessageTableList: [], //我的留言=>产品需求
      productRequestForm: {}, //我的留言=>产品需求
      MyLiveMessagePagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.onSizeChangeRequest(current, pageSize),
        onChange: (page, pageSize) => this.onPageChangeRequest(page, pageSize),
      },
      MyMessageProvideHead,
      MyMessageSolultHead,
      MyMessageProvideList: [], //我的留言=>产品供应
      MyMessageSolultList: [], //我的留言=>解决方案
      MyMessageProvideForm: {}, //我的留言=>产品供应
      ProvideListPagination: {
        current: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.onSizeChangeProvide(current, pageSize),
        onChange: (page, pageSize) => this.onPageChangeProvide(page, pageSize),
      },

      SolultListPagination: {
        current: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.onSizeChangeSolult(current, pageSize),
        onChange: (page, pageSize) => this.onPageChangeSolult(page, pageSize),
      },
      MaterialsDemandHead,
      MaterialsDemandPageList: [], //他人的留言=>需求响应
      MaterialsDemandPagination: {
        currrent: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.onSizeChangeMaterials(current, pageSize),
        onChange: (page, pageSize) =>
          this.onPageChangeMaterials(page, pageSize),
      },

      MaterialsSolultListPagination: {
        currrent: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.onSizeChangeMaterialsSolult(current, pageSize),
        onChange: (page, pageSize) =>
          this.onPageChangeMaterialsSolult(page, pageSize),
      },
      MaterialsDemandForm: {},
      ProductInfoListHead,
      ProductInfoList: [], //他人的留言=>供应采购
      ProductInfoListPagination: {
        currrent: 1,
        total: 0,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) =>
          this.onSizeChangeProductInfo(current, pageSize),
        onChange: (page, pageSize) =>
          this.onPageChangeProductInfo(page, pageSize),
      },
      ProductInfoForm: {},
      changeTar: 1,
      changeTarTwo: 1,
      selectedRowKeys: [], // Check here to configure the default column
      selectedRowKeysTwo: [],
      selectedRowKeysThree: [],
      unReadIdsThree: "",
      loading: false,
      demandStatus: [
        {
          label: "已解决",
          key: "1",
          value: 1,
        },
        {
          label: "未解决",
          key: "2",
          value: 2,
        },
      ],
      reStatus: [
        {
          label: "已上架",
          key: 1,
          value: 1,
        },
        {
          label: "已下架",
          key: 2,
          value: 2,
        },
      ],
      // reProductsTwo: [],
      reStatus1: [
        {
          label: "未读",
          key: "1",
          value: 0,
        },
        {
          label: "已读",
          key: "2",
          value: 1,
        },
      ],
      ipagination: {
        total: 0,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30", "40", "50"],
        showTotal: (total) => `共有 ${total} 条数据`,
        showQuickJumper: true,
        showSizeChanger: true,
      },
      form: this.$form.createForm(this, { name: "coordinated" }),
      productList: [],
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
    hasSelectedTwo() {
      return this.selectedRowKeysTwo.length > 0;
    },
    hasSelectedThree() {
      return this.selectedRowKeysThree.length > 0;
    },
  },
  created() {
    let _type = this.$route.query.type;
    if (_type == "true") {
      this.showFOllow = false;
    } else {
      this.showFOllow = true;
    }
    this.toGetMyMaterialsDemandPageList(); //我的留言-产品需求分页列表
    this.GetByParentList(); //产品一级分类下拉列表
    this.toGetMyProductInfoPageList(); //我的留言-产品供应分页列表
    this.togetMyUserMessageSolutionInfoList(); //我的留言-解决方案
    this.toGetMaterialsDemandPageList(); //他人的留言-产品需求
    this.toGetProductInfoPageList(); //他人的留言-产品供应
    this.togetMaterialsUserMessageSolutionInfoList(); //他人的留言-解决方案
  },
  methods: {
    clearMyMessageSoult() {
      this.MyMessageSoult.keyword = "";
      this.MyMessageSoult.productStatus = 0;
      this.SolultListPagination.current = 1;
      this.SolultListPagination.pageSize = 10;
      this.togetMyUserMessageSolutionInfoList();
    },
    TaRenSearch() {
      this.togetMaterialsUserMessageSolutionInfoList();
    },
    TaRenclear() {
      this.TaRenSoult.keyword = "";
      this.TaRenSoult.productStatus = 0;
      this.MaterialsSolultListPagination.current = 1;
      this.MaterialsSolultListPagination.pageSize = 10;
      this.togetMaterialsUserMessageSolutionInfoList();
    },
    // 搜索我的 留言 解决方案
    SearchMySoult() {
      this.togetMyUserMessageSolutionInfoList();
    },
    MYshowFOllow() {
      this.clear();
      this.productRequestForm={};
      this.toGetMyMaterialsDemandPageList();
      this.showFOllow = true;
      this.changeTar = 1;
      this.changeTarTwo = 1;
    },
    MYHideFOllow() {
      this.clear();
      this.MaterialsDemandForm={};
      this.toGetMaterialsDemandPageList();
      this.showFOllow = false;
      this.changeTar = 1;
      this.changeTarTwo = 1;      
    },
    // 产品需求=>产品类别选中
    productTypeOneChange(value) {
      this.productTwoCategory = "";
      if (value == "") {
        this.productOneCategory = "";
        this.form.setFieldsValue({
          productSecondCategory: "",
        });
        this.reProductsTwo = [];
        return;
      }
      this.reProducts.map((item, index) => {
        if (item.id == value) {
          this.productOneCategory = item.categoryNo.trim();
        }
      });
      let params = { pid: value };
      getProductOneCategory(params).then((res) => {
        if (res.code == 200) {
          console.log(this.form.productSecondCategory);
          this.form.setFieldsValue({
            productSecondCategory: "",
          });
          this.reProductsTwo = res.data.filter(ele => ele.categoryStatus === 1)
        }
      });
    },
    productTypeOneChange1(value) {
      this.productTwoCategory = value;
    },
    // 产品供应=>产品类别选中
    productProOneChange(value) {
      this.productProTwo = "";
      if (value == "") {
        this.productProOne = "";
        this.form.setFieldsValue({
          productProSecond: "",
        });
        this.productProvideTwo = [];
        return;
      }
      this.reProducts.map((item, index) => {
        if (item.id == value) {
          this.productProOne = item.categoryNo.trim();
        }
      });
      let params = { pid: value };
      getProductOneCategory(params).then((res) => {
        if (res.code == 200) {
          // console.log(this.form.productSecondCategory);
          this.form.setFieldsValue({
            productProSecond: "",
          });
          this.productProvideTwo = res.data;
        }
      });
    },
    productProOneChange1(value) {
      this.productProTwo = value;
    },
    checkChange(e) {
      this.checkNick = e.target.checked;
      if (e.target.checked == true) {
        this.productIslimited = 1;
      } else {
        this.productIslimited = 0;
      }
    },
    // 产品一级分类下拉列表
    GetByParentList() {
      productCategory().then((res) => {
        if (res.code == 200) {
          this.reProducts = res.data.filter(ele => ele.categoryStatus === 1)
          // this.reProductsTwo = res.data;
        }
      });
    },
    //我的留言-产品需求table
    toGetMyMaterialsDemandPageList() {
      let params = {
        size: this.MyLiveMessagePagination.pageSize,
        current: this.MyLiveMessagePagination.current,
        ...this.productRequestForm,
      };
      getMyMaterialsDemandPageList(params).then((res) => {
        if (res.code == 200) {
          this.MyLiveMessageTableList = res.data.records;
          this.MyLiveMessagePagination.total = res.data.total;
        }
      });
    },
    //分页
    onPageChangeRequest(page, pageSize) {
      this.MyLiveMessagePagination.current = page;
      this.toGetMyMaterialsDemandPageList();
    },
    onSizeChangeRequest(current, pageSize) {
      this.MyLiveMessagePagination.pageSize = pageSize;
      this.MyLiveMessagePagination.current = current;
      this.toGetMyMaterialsDemandPageList();
    },
    //我的留言-产品供应table
    toGetMyProductInfoPageList() {
      let params = {
        productIslimited: this.productIslimited,
        size: this.ProvideListPagination.pageSize,
        current: this.ProvideListPagination.current,
        ...this.MyMessageProvideForm,
      };
      getMyProductInfoPageList(params).then((res) => {
        if (res.code == 200) {
          this.MyMessageProvideList = res.data.records;
          this.ProvideListPagination.total = res.data.total;
        }
      });
    },

    // 分页
    onPageChangeProvide(page, pageSize) {
      this.ProvideListPagination.current = page;
      this.toGetMyProductInfoPageList();
    },
    onSizeChangeProvide(current, pageSize) {
      this.ProvideListPagination.pageSize = pageSize;
      this.ProvideListPagination.current = 1;
      this.toGetMyProductInfoPageList();
    },

    //我的留言-解决方案table
    togetMyUserMessageSolutionInfoList() {
      let _params = {
        type: 1, //(1:我的留言;2:他人的留言)
        size: this.SolultListPagination.pageSize,
        current: this.SolultListPagination.current,
        // readStatus:1,
        keyword: this.MyMessageSoult.keyword,
        solutionStatus: this.MyMessageSoult.productStatus,
      };
      getMyUserMessageSolutionInfoList(_params).then((res) => {
        if (res.code == 200) {
          this.MyMessageSolultList = res.data.records;
          this.SolultListPagination.total = res.data.total;
        }
      });
    },

    // 分页
    onPageChangeSolult(page, pageSize) {
      this.SolultListPagination.current = page;
      this.togetMyUserMessageSolutionInfoList();
    },
    onSizeChangeSolult(current, pageSize) {
      this.SolultListPagination.pageSize = pageSize;
      this.SolultListPagination.current = 1;
      this.togetMyUserMessageSolutionInfoList();
    },

    // 他人的留言-产品需求table
    toGetMaterialsDemandPageList() {
      let params = {
        size: this.MaterialsDemandPagination.pageSize,
        current: this.MaterialsDemandPagination.current,
        ...this.MaterialsDemandForm,
      };
      getMaterialsDemandPageList(params).then((res) => {
        if (res.code == 200) {
          this.MaterialsDemandPageList = res.data.records;
          this.MaterialsDemandPagination.total = res.data.total;
        }
      });
    },

    // 分页
    onPageChangeMaterials(page, pageSize) {
      this.MaterialsDemandPagination.current = page;
      this.toGetMaterialsDemandPageList();
    },
    onSizeChangeMaterials(current, pageSize) {
      this.MaterialsDemandPagination.pageSize = pageSize;
      this.MaterialsDemandPagination.current = current;
      this.toGetMaterialsDemandPageList();
    },
    // 他人的留言-产品供应
    toGetProductInfoPageList() {
      let params = {
        size: this.ProductInfoListPagination.pageSize,
        current: this.ProductInfoListPagination.current,
        ...this.ProductInfoForm,
      };
      getProductInfoPageList(params).then((res) => {
        if (res.code == 200) {
          this.ProductInfoList = res.data.records;
          this.ProductInfoListPagination.total = res.data.total;
        }
      });
    },
    // 分页
    onPageChangeProductInfo(page, pageSize) {
      this.ProductInfoListPagination.current = page;
      this.toGetProductInfoPageList();
    },
    onSizeChangeProductInfo(current, pageSize) {
      this.ProductInfoListPagination.pageSize = pageSize;
      this.ProductInfoListPagination.current = current;
      this.toGetProductInfoPageList();
    },

    //他人的留言-解决方案table
    togetMaterialsUserMessageSolutionInfoList() {
      let _params = {
        type: 2, //(1:我的留言;2:他人的留言)
        size: this.MaterialsSolultListPagination.pageSize,
        current: this.MaterialsSolultListPagination.current,
        // readStatus:1,
        keyword: this.TaRenSoult.keyword,
        solutionStatus: this.TaRenSoult.productStatus,
      };
      getMyUserMessageSolutionInfoList(_params).then((res) => {
        if (res.code == 200) {
          this.MaterialsMessageSolultList = res.data.records;
          this.MaterialsSolultListPagination.total = res.data.total;
        }
      });
    },
    // 他人的留言，解决方案分页
    onPageChangeMaterialsSolult(page, pageSize) {
      this.MaterialsSolultListPagination.current = page;
      this.togetMaterialsUserMessageSolutionInfoList();
    },
    onSizeChangeMaterialsSolult(current, pageSize) {
      this.MaterialsDemandPagination.pageSize = pageSize;
      this.MaterialsSolultListPagination.current = current;
      this.togetMaterialsUserMessageSolutionInfoList();
    },
    // 搜索表单
    handleSubmit(e) {
      e.preventDefault();
      // 我的留言产品需求=>搜索
      if (this.changeTar == 1 && this.showFOllow == true) {
        this.form.validateFields((err, values) => {
          if (!err) {
            if (values.Data != undefined) {
              var expirationDateStart = moment(values.Data[0]).format(
                "YYYY-MM-DD"
              );
              var expirationDateEnd = moment(values.Data[1]).format(
                "YYYY-MM-DD"
              );
            }
            this.productRequestForm = {
              keyword: values.keyword,
              demandStatus: values.demandStatus,
              // categoryName: values.reProducts,
              productOneCategory: this.productOneCategory,
              productSecondCategory: this.productTwoCategory,
              priceStart: values.priceFrom,
              priceEnd: values.priceTo,
              expirationDateStart,
              expirationDateEnd,
            };
            this.toGetMyMaterialsDemandPageList();
          }
        });
      }
      // 我的留言产品供应=>搜索
      else if (this.changeTar == 2 && this.showFOllow == true) {
        this.form.validateFields((err, values) => {
          if (!err) {
            this.MyMessageProvideForm = {
              keyword: values.keyword,
              productStatus: values.proProvideStatus,
              // categoryName: values.reProductsTwo,
              productOneCategory: this.productProOne,
              productSecondCategory: this.productProTwo,
              priceStart: values.priceFrom,
              priceEnd: values.priceTo,
            };
            this.toGetMyProductInfoPageList();
          }
        });
      }
      // 他人的留言=>需求响应搜索
      else if (this.changeTarTwo == 1 && this.showFOllow == false) {
        this.form.validateFields((err, values) => {
          if (!err) {
            if (values.data != undefined) {
              var createTimeStart = moment(values.data[0]).format("YYYY-MM-DD");
              var createTimeEnd = moment(values.data[1]).format("YYYY-MM-DD");
            }
            this.MaterialsDemandForm = {
              keyword: values.keyword,
              readStatus: values.reStatus1,
              createTimeStart,
              createTimeEnd,
            };
            this.toGetMaterialsDemandPageList();
          }
        });
      }
      // 他人的留言=>供应采购搜索
      else if (this.changeTarTwo == 2 && this.showFOllow == false) {
        this.form.validateFields((err, values) => {
          if (!err) {
            if (values.data != undefined) {
              var createTimeStart = moment(values.data[0]).format("YYYY-MM-DD");
              var createTimeEnd = moment(values.data[1]).format("YYYY-MM-DD");
            }
            this.ProductInfoForm = {
              keyword: values.keyword,
              readStatus: values.reStatus1,
              createTimeStart,
              createTimeEnd,
            };
            this.toGetProductInfoPageList();
          }
        });
      }
    },
    // 我的留言-产品需求详情跳转
    seeMatirial(record) {
      let id = record.objectId;
      if (record.delStatus == 1) {
        this.$message.warning("该需求不存在");
        return;
      }
      if (
        record.auditStatus != 2 ||
        record.demandStatus == 1 ||
        Date.parse(record.expirationDate) < Date.now()
      ) {
        this.$message.warning("该需求已失效");
        return;
      }
      // this.$router.push({
      //   path: "/MaterialDetails",
      //   query: { id },
      // });
      let routeData = this.$router.resolve({
        path: "/MaterialDetails",
        query: { id },
      });
      window.open(routeData.href, "_blank");
    },
    // 我的留言-需求/供应=>留言查看
    seeMessage(record, showStatus, title) {
      console.log(record);
      this.MessageForm = { ...record };
      let _params = {
        id: record.id,
      };
      updateMessage(_params)
        .then((res) => {})
        .catch((error) => {});
      if (title == "解决方案") {
        this.showSoultMessageStatus = true;
      }
      this.showMessageStatus = showStatus;
      this.messageVisible = true;
      if (this.MessageForm.productId != null) {
        //  ["141c7383-a286-4ed3-a145-6c73ed9e75d4:全棉时代婴儿棉柔巾纯棉新生儿宝宝干湿两用巾棉柔巾非湿巾", "bbda5152-cd37-4ca5-b973-350114371d7f:11"]
        var list = this.MessageForm.productId.split(",");
        var arr = [];
        list.forEach((ele) =>
          arr.push({ id: ele.split(":")[0], name: ele.split(":")[1] })
        );
        this.productList = arr;
      }
    },
    clearMessage() {
      for (let item in this.MessageForm) {
        this.MessageForm[item] = "";
      }
      this.messageVisible = false;
      this.showSoultMessageStatus = false;
    },
    // 他人的留言-产品需求/产品供应=>详情查看
    seeResponse(record, showStatus, title) {
      this.detailForm = { ...record };
      // updateMessage(record.id);
      let _params = {
        id: record.id,
      };
      updateMessage(_params)
        .then((res) => {
          this.toGetProductInfoPageList();
          this.toGetMaterialsDemandPageList();
          this.togetMaterialsUserMessageSolutionInfoList();
        })
        .catch((error) => {});
      this.showStatus = showStatus;
      if (title == "解决方案") {
        this.showSoultMessageStatus = true;
      }
      this.visible = true;
      if (this.detailForm.productId != null) {
        var list = this.detailForm.productId.split(",");
        var arr = [];
        list.forEach((ele) =>
          arr.push({ id: ele.split(":")[0], name: ele.split(":")[1] })
        );
        this.productList = arr;
      }
    },
    // 他人的留言模态框
    close() {
      for (let item in this.detailForm) {
        this.detailForm[item] = "";
      }
      this.visible = false;
    },
    // 我的留言-产品供应详情跳转
    seeDetail(record) {
      let id = record.objectId;
      if (record.delStatus == 1) {
        this.$message.warning("该产品不存在");
        return;
      }
      if (record.auditStatus != 2 || record.productStatus == 2) {
        this.$message.warning("该产品已下架");
        return;
      }
      let routeData = this.$router.resolve({
        path: "/ProductContent",
        query: { id },
      });
      window.open(routeData.href, "_blank");
    },
    seeSolutDetail(record) {
      let id = record.objectId;
      // if (record.delStatus == 1) {
      //   this.$message.warning("该产品不存在");
      //   return;
      // }
      // if (record.auditStatus != 2 || record.productStatus == 2) {
      //   this.$message.warning("该产品已下架");
      //   return;
      // }
      let routeData = this.$router.resolve({
        path: "/ProgrammeContent",
        query: { id },
      });
      window.open(routeData.href, "_blank");
    },
    seeProduct(id) {
      let param = {
        id: id,
      };
      GetproductDetail(param).then((res) => {
        var record = res.data;
        if (record.delStatus == 1) {
          this.$message.warning("该产品不存在");
          return;
        }
        if (record.auditStatus != 2 || record.productStatus == 2) {
          this.$message.warning("该产品已下架");
          return;
        }
        let routeData = this.$router.resolve({
          path: "/ProductContent",
          query: { id },
        });
        window.open(routeData.href, "_blank");
      });
    },
    // 查看留言
    handleEdit(e) {},
    clear() {
      this.callback(this.changeTar)
    },
    clear2() {
      this.callback2(this.changeTarTwo)
    },
    callback(key) {
      this.checkNick = false
      this.form.resetFields()
      this.productTypeOneChange(this.productOneCategory)
      this.productProOneChange(this.productProOne)
      if(key == 1) {
        this.productRequestForm = {}
        this.toGetMyMaterialsDemandPageList()
      }else if(key == 2) {
        this.MyMessageProvideForm = {}
        this.toGetMyProductInfoPageList()
      }else if(key == 3) {
        this.clearMyMessageSoult()
      }
      this.changeTar = key;
    },
    callback2(key) {
      this.form.resetFields()
      if(key == 1) {
        this.MaterialsDemandForm = {}
        this.toGetMaterialsDemandPageList()
      }else if(key==2) {
        this.ProductInfoForm = {}
        this.toGetProductInfoPageList()
      }else if(key==3) {
        this.TaRenclear()
      }
      this.changeTarTwo = key;
    },
    // 选择操作
    onSelectChange(value, selectedRowKeys) {
      this.selectedRowKeys = value;
      let unRead = [];
      unRead = selectedRowKeys.filter((item) => item.readStatus == 0); //留下状态0=>未读的
      if (unRead.length > 0) {
        this.unReadIds = unRead.map((item, index) => item.id).join(","); //未读的
      }
    },
    // 单个/批量设置为已读
    batchUpdate() {
      if (this.unReadIds == "") {
        this.loading = false;
        this.$message.warning("请选择留言状态未读的选项");
        this.selectedRowKeys = [];
      }
      this.loading = true;
      let params = {
        id: this.unReadIds,
      };
      updateMessage(params).then((res) => {
        if (res.code == 200) {
          this.loading = false;
          this.selectedRowKeys = [];
          this.$message.success("设置成功");
          this.toGetMaterialsDemandPageList();
        }
      });
    },
    // 选择操作
    onSelectChangeTwo(value, selectedRowKeysTwo) {
      console.log(value, selectedRowKeysTwo);
      this.selectedRowKeysTwo = value;
      let unRead = [];
      unRead = selectedRowKeysTwo.filter((item) => item.readStatus == 0); //留下状态0=>未读的
      if (unRead.length > 0) {
        this.unReadIdsTwo = unRead.map((item, index) => item.id).join(","); //未读的
      }
    },
    // 选择操作
    onSelectChangeThree(value, selectedRowKeysThree) {
      console.log(value);
      console.log(selectedRowKeysThree);
      this.selectedRowKeysThree = value;
      let unRead = [];
      unRead = selectedRowKeysThree.filter((item) => item.readStatus == 0); //留下状态0=>未读的
      if (unRead.length > 0) {
        this.unReadIdsThree = unRead.map((item, index) => item.id).join(","); //未读的
      }
    },
    // 单个/批量设置为已读
    batchUpdateTwo() {
      if (this.unReadIdsTwo == "") {
        this.loading = false;
        this.$message.warning("请选择留言状态未读的选项");
        this.selectedRowKeysTwo = [];
      }
      this.loading = true;
      let params = {
        id: this.unReadIdsTwo,
      };
      updateMessage(params).then((res) => {
        if (res.code == 200) {
          this.selectedRowKeysTwo = [];
          this.$message.success("设置成功");
          this.loading = false;
          this.toGetProductInfoPageList();
        }
      });
    },

    batchUpdateThree() {
      if (this.unReadIdsThree == "") {
        this.loading = false;
        this.$message.warning("请选择留言状态未读的选项");
        this.selectedRowKeysThree = [];
      }
      this.loading = true;
      let params = {
        id: this.unReadIdsThree,
      };
      updateMessage(params).then((res) => {
        if (res.code == 200) {
          this.selectedRowKeysThree = [];
          this.$message.success("设置成功");
          this.loading = false;
          this.togetMaterialsUserMessageSolutionInfoList();
        }
      });
    },
    // 删除他人留言
    deleteMessage(record, index) {
      const that = this
      this.$confirm({ 
        title: '您确定要删除此信息吗?',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          let params = { id: record.id }
          deleteMessage(params).then(res => {
            if (res.code == 200) {
              that.$message.success("删除成功")
              if(index === 1) {   // 产品需求
                that.toGetMaterialsDemandPageList()
              }else if(index === 2) {   // 产品供应
                that.toGetProductInfoPageList()
              }else if(index === 3) {   // 解决方案
                that.togetMaterialsUserMessageSolutionInfoList()
              }
            }
          })
        },
        onCancel() {}
      })
    },
  },
  components: {
    IconFont,
  },
};
</script>

<style lang="less" scoped>
.tab-btn1 {
  cursor: pointer;
  width: 184px;
  height: 60px;
  background-color: #2a51bc;
  box-shadow: 0px 6px 20px 0px rgba(24, 138, 241, 0.16);
  border-radius: 8px;
  color: #ffffff;
  font-size: 18px;
}
.content-box {
  .tab-box {
    margin-bottom: 24px;
    .tab-btn {
      cursor: pointer;
      width: 184px;
      height: 60px;
      background-color: #ffffff;
      box-shadow: 0px 6px 20px 0px rgba(24, 138, 241, 0.16);
      border-radius: 8px;
      color: #606266;
      font-size: 18px;
      font-weight: 700;
    }
  }

  .MyMessage {
    padding: 16px 24px;
    background-color: #ffffff;
    border-radius: 4px;
    span {
      a {
        color: #188af1;
      }
    }

    h2 {
      font-size: 22px;
      font-weight: 400;
      color: #303133;
      margin-bottom: 24px;
    }

    .card-box {
      padding: 16px;
      margin-bottom: 24px;
      background-color: #f5f7fa;
      border-radius: 4px;
    }
  }

  .Interactive {
    padding: 16px 24px;
    background-color: #ffffff;
    border-radius: 4px;
    span {
      a {
        color: #188af1;
      }
    }

    h2 {
      font-size: 22px;
      font-weight: 400;
      color: #303133;
      margin-bottom: 24px;
    }

    .card-box {
      padding: 16px;
      margin-bottom: 24px;
      background-color: #f5f7fa;
      border-radius: 4px;
    }
  }
}
.messageCompany {
  padding: 20px;
  border-radius: 4px;
  background: #f5f7fa;
  overflow: hidden;
  li {
    line-height: 24px;
    width: 100%;
    float: left;
    a {
      color: #188af1;
    }
    &:first-child {
      width: 100%;
      color: #303133;
    }
    &:nth-child(2) {
      width: 100%;
      border-bottom: 1px dashed #dcdfe6;
      margin-bottom: 10px;
      height: auto;
      padding-bottom: 10px;
    }
    &:nth-child(7) {
      width: 100%;
    }
  }
}
.messagetxt {
  padding: 20px;
  font-size: 18px;
}
</style>